{% extends "mobile/common/base.html" %}
{% load bt_tags %}


{% block title %}{{ order.product.name }}{% endblock %}
{% block css_ex %}
<link rel="stylesheet" href="{{ STATIC_URL }}mobile/css/tp/base.css?v=131231">
<script type="text/javascript" src="{{ STATIC_URL }}dashboard/js/handlebars.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}vacation/js/JS2ObjCBridge.js"></script>
<script>
// App 显示底部navigation bar
{% if success %}
{% if user_agent == 4 %}
android.onClickOrderComplete({{ order.pk|cipher }});
{% else %}
JS2ObjCBridge.call('onClickOrderComplete', ['{{ order.pk|cipher }}']);
{% endif %}
{% endif %}
var bt_show_bottom_bar = 'YES';

function ExceedFee() {
    if (!$("input[name='exceed_people_count']").val()) {
        return 0;
    };
    var exceed_people = $("input[name='exceed_people_count']").val();
    var exceed_fee = $("input[name='exceed_people_count']").attr("data-fee");
    var normal_count = 0;
    var max_count = 0;
    $(".types").find("table").each(function() {
        obj = $(this).find("input[name='type']");
        count = $(this).find("input[name='count']").val();
        max_count += parseInt(obj.attr("data-max")) * count;
        normal_count += parseInt(obj.attr("data-normal")) * count;
    });
    if (exceed_people > max_count) {
        $(".text-error").text('所选类型不能承载所有人');
    } else {
        $(".text-error").text('');
    };
    if (exceed_people <= normal_count) {
        return 0;
    }
    var fee = (exceed_people - normal_count) * exceed_fee;
    return fee;
};

function total_prices(){
    var prices = 0;
    $(".type-price").each(function(){
        prices = prices + parseInt($(this).text());
    });
    if (surcharge_prices['hotel_name'] < surcharge_prices['second_hotel_name']) {
        var price = surcharge_prices['second_hotel_name'];
    } else {
        var price = surcharge_prices['hotel_name'];
    };
    if (!price) {
        price = 0;
    };
    var total_count = 0;
    $("input[name='count']").each(function() {
        if ($(this).val()) {
            total_count += parseInt($(this).val());
        }
    });
    $("input[name='surcharge']").val(parseInt(price) * total_count);
    $(".surcharge-price").html("￥" + parseInt(price) * total_count);
    if (price == 0) {
        $(".surcharge").hide();
    } else {
        $(".surcharge").show();
    };
    if (price) {
        prices += price * total_count;
    };
    var exceed_fee = ExceedFee();
    prices += exceed_fee;
    $("#total_prices").text(prices);
};

function changeTravelDate() {
    document.getElementById("changeDate").value = true;
    document.getElementById("submit").click();
}
function WindowReload() {
    window.location.reload();
}
{% if user_agent == 4 %}
function changeTime() {
    var value = $("input[name='time']").val();
    if (value){
        var data = value.split(":");
        android.showSetTimePicker(parseInt(data[0]), parseInt(data[1]));
    } else {
        android.showSetTimePicker(-1, -1);
    };
};
{% endif %}

var not_book_hotel = "在您预订好酒店后，可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。";
var stay_family = "在预订成功后，您可以通过微信服务号或400电话与我们联系，以确定您最方便的接送地点和时间。";
var no_hotel = "在预订成功后，您可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。";
var surcharge_prices = new Object();

function setHotelName(id, name) {
    $("#id_"+id).val(name);
    if (name=='not_book_hotel') {
        $("#"+id).parents("tr").find("p").text("我还没有预订酒店");
        $("#"+id).html(not_book_hotel);
    } else if (name=='stay_family') {
        $("#"+id).parents("tr").find("p").text("我住在当地亲朋家");
        $("#"+id).html(stay_family);
    } else if (name=='no_hotel') {
        $("#"+id).parents("tr").find("p").text("我的酒店不在列表中");
        $("#"+id).html(no_hotel);
    } else {
        if (id=="hotel_name") {
            $("#"+id).parents("tr").find("p").text("候车酒店");
        } else {
            $("#"+id).parents("tr").find("p").text("送达酒店");
        };
        $("#"+id).html("<input type='text' readonly='readonly' placeholder='请选择' style='margin-top: 14px; margin-left: 0px;' value='"+name+"'><i class='icon icon-type'></i>");
    };
    $.ajax({
        url: '/product/{{ product.pk }}/region_surcharge/',
        type: 'GET',
        data: {
            'hotel': name,
        },
        success: function(data) {
            surcharge_prices[id] = data.price;
            total_prices();
        }
    });
};

function setTime(value) {
    $("input[name='time']").val(value);
};
</script>
<style type="text/css">
    .icon {
        background-image: url({{ STATIC_URL }}img/vacation_order_icon.png?v=1.0);
        display: inline-block;
        background-repeat: no-repeat;
        background-size: 22px 214px;
    }
    .icon-order {
        background-position: 0 -12px;
        width: 22px;
        height: 22px;
        float: left;
        margin-right: 8px;
        margin-top: -2px;
    }
    .icon-info2 {
        background-position: 0 -136px;
        width: 22px;
        height: 23px;
        float: left;
        margin-right: 8px;
        margin-top: -2px;
    }
    .icon-user {
        background-position: 0 -162px;
        width: 22px;
        height: 22px;
        float: left;
        margin-right: 8px;
        margin-top: -2px;
    }
    input[type='time'] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        color: #999;
        font-size: 16px;
        width: 80%;
        border: none;
        box-sizing: border-box;
        outline: none;
        margin-top: -5px;
    }

    .icon-date {
        background-position: 0 -36px;
        width: 22px;
        height: 22px;
        float: right;
        margin: 11px 15px 12px 0px;
    }
    .icon-type {
        background-position: 0 -62px;
        width: 20px;
        height: 20px;
        float: right;
        margin: 11px 10px 12px 0px;
    }
    .icon-plus {
        background-position: 0 -188px;
        width: 22px;
        height: 22px;
        float: left;
        margin: 10px 10px 10px 18px;
    }
    h1 {
        color: #484848;
        padding-bottom: 0px;
        border-bottom: 0px;
    }
    h2 {
        color: #484848;
        padding-bottom: 0px;
        border-bottom: 0px;
    }
    td span  {
        margin-left: 13px;
        font-size: 16px;
        color: #999;
    }
    td p  {
        margin-left: 13px;
        font-size: 16px;
        color: #999;
    }
    td.td-info {
        background-color:#fbf7ed!important;
    }
    td .span2 {
        float: left;
        width: 100%!important;
    }
    #add_type {
        border-collapse: separate;
        height: 47px;
        background-color: #fbf7ed;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        color: #4abdcc;
        font-size: 18px;
        font-weight: 200;
        border: 1px solid #4abdcc;
        cursor: pointer;
    }
    #add_type b {
        margin: 0px 10px;
        border: 1px solid #4abdcc;
        font-size: 20px;
        font-weight: 100;
        width: 28px;
        height: 28px;
        padding: 0px 6px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
    }
    strong {
        color: #f86c41;
        font-size: 16px;
    }
    strong span {
        color: #f86c41;
        font-weight: 400;
    }
    .type-price {
        color: #f86c41;
    }

    .surcharge-price {
        color: #f86c41;
    }
    .total {
        margin-top: 20px;
        padding: 10px 0px;
        border-bottom: 1px solid #b0b0b0;
        border-top: 1px solid #b0b0b0;
        font-size: 14px;
    }
    .total p {
        margin: 0px;
        margin-left: 20px;
    }
    .help_text {
        display: none;
        color: #fc5d7b;
    }
    table td:first-child {
        width: 35%;
        vertical-align: middle;
    }
    .type-description {
        font-size: 13px;
    }
    img {
        width: 12px;
        cursor: pointer;
        float: right;
        margin-top: 18px;
        margin-right: 19%;
    }
    .changeType input {
        width: 67% !important;
    }
    .baby-count {
        display: none;
    }
    #id_baby_count {
        border: 1px solid #c9c9c9;
        width: 50px;
        height: 26px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        padding-left: 5px;
        margin-right: 5px;
        margin-top: 18px;
    }
    form p {
        margin: 10px 0px 10px 5px;
    }
    .td-btn {
        cursor: pointer;
    }
    .td-btn:active {
        background-color: #f2f2f2 !important;
    }
    .td-btn:active input {
        background-color: #f2f2f2 !important;
    }
    .td-btn input {
        width: 70% !important;
    }
    input[type=checkbox]:checked + label {
        background: url({{ STATIC_URL }}img/vacation_order_icon.png?v=1.0) 10px -88px no-repeat !important;
        background-size: 22px 214px !important;
        height: 21px !important;
    }
    input[type=checkbox] + label {
        background: url({{ STATIC_URL }}img/vacation_order_icon.png?v=1.0) 10px -110px no-repeat !important;
        background-size: 22px 214px !important;
        height: 21px !important;
    }
    .booking-agreement input[type=checkbox] {
        margin: 120px;
    }
    .booking-agreement {
        padding-left: 0px;
        overflow: initial;
    }
    .booking-agreement label {
        padding-left: 40px !important;
        word-wrap: break-word;
        word-break: normal;
    }
    .td-hotel {
        line-height: 22px !important;
        height: 30px !important;
        vertical-align: middle;
        padding-left: 13px;
        color: #999;
    }
    .hotel-label {
        text-align: center;
    }
    .hotel-label p {
        margin: 0px 18px;
        padding: 5px 0px;
        color: #5c5c5c;
        font-size: 14px;
        line-height: 22px;
    }
    input[type='submit'] {
        width: 100% !important;
        border: 0 !important;
        border-radius: 4px !important;
    }
    section .order {
        width: 100%;
        height: 21px;
        background-color: #f2f2f2;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid #c9c9c9;
        padding: 15px 15px;
    }
    section .order a {
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        color: #ffffff;
        background-color: #b0b0b0;
        padding: 9px 26px;
        border-radius: 4px;
        margin-top: 1px;
    }
    section .order .done {
        background-color: #4abdcc;
        {% if user_agent == 4 %}
        padding: 9px 41px;
        {% endif %}
        {% if user_agent == 1 %}
        padding: 9px 41px 8px 41px;
        {% endif %}
        float: right;
        margin: -9px 30px 0px 0px;
    }
    section .order a:active {
        background-color: #999999;
    }
    section .order .done:active {
        background-color: #2e9dab;
    }
    section form {
        margin-bottom: 110px;
    }
</style>
{% endblock %}
{% block app_header %}

{% endblock %}
{% block content %}
<body class="booking" data-user-agent="{{ user_agent }}" data-csrf="{{ csrf_token }}" data-version="{{ app_version }}">
<section class="booking-form">
    <form action="" method="post" enctype="multipart/form-data">
        <input type="hidden" id="changeDate" name="change_date">
        <input type="hidden" id="changeType" name="change_type">
        <input type="hidden" id="viewDetail" name="view_detail">
        {% csrf_token %}
        <h2><i class="icon icon-order"></i>基本信息</h2>
        <p id="booking-error" class="text-error text-center" style="display: block;">{{ error|default('') }}</p>
        <table>
            {% if product.exceed_fee %}
            <tr>
                <td><label>人数</label></td>
                <td>
                    <input type="number" name="exceed_people_count" value="{{ form.exceed_people_count.value() }}" data-fee="{{ product.exceed_fee }}"/>
                </td>
            </tr>
            {% endif %}
            {% if product.template_id != 5 %}
            <tr>
                {% if product.template_id == 4 %}
                <td><label>起飞日期</label></td>
                {% else %}
                    {% if product.template_id == 3 %}
                    <td><label>到达日期</label></td>
                    {% else %}
                    <td><label>使用日期</label></td>
                    {% endif %}
                {% endif %}
                <td class="td-btn" onclick="changeTravelDate();">
                    <input type="text" readonly="readonly" name="date" placeholder="yyyy-mm-dd" value="{% if date %}{{ date }}{% else %}{{ form.date.value()|default('') }}{% endif %}"/>
                    <i class="icon icon-date"></i>
                </td>
            </tr>
            {% if product.times %}
            <tr>
                <td><label>{{ product.time_title }}</label></td>
                <td>
                    {% if product.times.count == 1 %}
                    <input type="hidden" name="ptime" value="{{ time.pk }}">
                    {% for time in product.times %}
                    <input type="text" name="" value="{{ time.get_time() }}" readonly="readonly">
                    {% endfor %}
                    {% else %}
                    <select name="ptime">
                        {% for time in product.times %}
                        <option value="{{ time.pk }}" {% if order.ptime.pk == time.pk %}selected="selected"{% endif %}>{{ time.get_time() }}</option>
                        {% endfor %}
                    </select>
                    {% endif %}
                </td>
            </tr>
            {% endif %}
            {% if product.template_id == 4 %}
            <tr>
                <td><label>起飞时间</label></td>
                {% if user_agent == 4 %}
                <td class="td-btn" onclick="changeTime();">
                    <input type="text" name="time" placeholder="HH:MM" value="{% if form.time.value() %}{{ form.time.value() }}{% endif %}"/>
                {% else %}
                <td>
                    <span><input {% if form.time.value() %}type="time"{% else %}type="text"{% endif %} onfocus="(this.type='time')" name="time" value="{{ form.time.value() }}"/></span>
                {% endif %}
                </td>
            </tr>
            <tr>
                <td><label>航班号</label></td>
                <td>{{ form.flight|safe }}</td>
            </tr>
            {% endif %}
            {% if product.template_id == 3 %}
            <tr>
                <td><label>到达时间</label></td>
                {% if user_agent == 4 %}
                <td class="td-btn" onclick="changeTime();">
                    <input type="text" name="time" placeholder="HH:MM" value="{% if form.time.value() %}{{ form.time.value() }}{% endif %}"/>
                {% else %}
                <td>
                    <span><input {% if form.time.value() %}type="time"{% else %}type="text"{% endif %} onfocus="(this.type='time')" name="time" value="{{ form.time.value() }}"/></span>
                {% endif %}
                </td>
            </tr>
            <tr>
                <td><label>航班号</label></td>
                <td>{{ form.flight|safe }}</td>
            </tr>
            {% endif %}
            {% endif %}
            {% for custom_field in custom_fields %}
            <tr>
                <td><label>{{ custom_field.name }}</label></td>
                <td><input type="text" name="field_{{ custom_field.name_en }}" value={{ custom_field.value }}></input></td>
            </tr>
            {% endfor %}
        </table>
        <div class="types">
        {% for type in order.types %}
        <table class="order-type{% if type.position != 1%}{{ type.position }}{% endif %}" {% if type.position == 1 %}id="clone-type"{% endif %}>
            <tr>
                <td><label>购买类型</label></td>
                <td class="td-btn {% if not product.one_type %}changeType{% endif %}">
                    <input type="hidden" name="ordertype" value="{{ type.pk|default(0) }}">
                    <input type="hidden" name="type" value="{{ type.type.pk }}" data-max="{{ type.type.maximum }}" data-normal="{{ type.type.normal }}">
                    <input type="hidden" name="category" value="{{ type.category }}">
                    <input type="text" placeholder="请选择类型" value="{{ type.name }}" position="{{ type.position }}" name="position" readonly="readonly"/>
                    {% if not product.one_type %}
                    <i class="icon icon-type"></i>
                    {% endif %}
                </td>
            </tr>
            <tr>
                {% if product.template_id == 8 %}
                <td><label>天数</label></td>
                {% else %}
                <td><label>数量</label></td>
                {% endif %}
                <td><input type="number" name="count" {% if type.count or type.count == 0 %}value="{{ type.count }}"{% else %}value="1"{% endif %} data-fee="{{ type.fee|to_int }}"></td>
            </tr>
            <tr>
                <td><label>价格</label></td>
                <td>
                    <strong><span>￥</span><b class="type-price">{{ type.price }}</b></strong>
                </td>
            </tr>
        </table>
        {% endfor %}
        </div>
        {% if not product.one_type %}
        <table style="border-spacing: inherit;">
            <tr>
                <td id="add_type"><i class="icon icon-plus"></i>添加新购买类型</td>
            </tr>
        </table>
        {% endif %}
        {% if product.is_carrying_baby %}
        <p style="margin:-15px -10px 20px -10px;display: block;">
            <span class="booking-agreement" style="float: left;">
                <input type="checkbox" id="baby-check">
                <label for="baby-check">
                    <span>携带婴儿</span>
                </label>
            </span>
            <span class="baby-count">
                <input type="number" id="id_baby_count" name="baby_count" value="{{ form.baby_count.value()|default(0) }}"/>位</span>
            </span>
        </p>
        <p style="clear: both; margin-top: -20px;" class="baby-count">
            ({{ product.baby_description }}，婴儿免费，但需告知)
        </p>
        <p style="clear: both; margin:0px;"></p>
        {% endif %}

        {% if product.template_id != 1 %}
        {% if product.template_id != 5 %}
        {% if product.template_id != 8 %}
        <h2 class="hotel" style="margin-top: 35px;"><i class="icon icon-info2"></i>接送服务</h2>
        <p style="color: #999; margin: -5px 0px 5px 0px;" class="hotel">{{ product.pick_range }}</p>
        <input id="id_hotel_name" name="hotel_name" type="hidden" value="{{ form.hotel_name.value()|default('')|safe }}">
        <input id="id_second_hotel_name" name="second_hotel_name" type="hidden" value="{{ form.second_hotel_name.value()|default('')|safe }}">
        <table cellspacing="0" class="hotel">
            <tr>
                {% if product.support_hotels %}
                <td class="hotel-label"><p>候车酒店</p></td>
                {% else %}
                    {% if product.hotel_type == 1 %}
                    <td class="hotel-label"><p>候车酒店</p></td>
                    {% else %}
                        {% if product.hotel_type == 2 %}
                        <td class="hotel-label"><p>送达酒店</p></td>
                        {% else %}
                        <td class="hotel-label"><p>接送酒店</p></td>
                        {% endif %}
                    {% endif %}
                {% endif %}
                <td class="td-btn td-hotel" name="hotel_name" id="hotel_name">
                    {% if not form.hotel_name.value() %}
                    <input type="text" readonly="readonly" placeholder="请选择" style="margin-top: 14px; margin-left: 0px;"/>
                    <i class="icon icon-type"></i>
                    {% else %}
                        {% if form.hotel_name.value() == 'not_book_hotel' %}
                        在您预订好酒店后，可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                        {% else %}
                            {% if form.hotel_name.value() == 'no_hotel' %}
                            在预订成功后，您可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                            {% else %}
                                {% if form.hotel_name.value() == 'stay_family' %}
                                    在预订成功后，您可以通过微信服务号或400电话与我们联系，以确定您最方便的接送地点和时间。
                                {% else %}
                                <input type="text" readonly="readonly" placeholder="请选择" style="margin-top: 14px; margin-left: 0px;" value="{{ form.hotel_name.value()|default('') }}">
                                <i class="icon icon-type"></i>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    {% endif %}
                </td>
            </tr>
            {% if product.support_hotels %}
            <tr class="support-hotels">
                <td class="hotel-label"><p>送达酒店</p></td>
                <td class="td-btn td-hotel" name="second_hotel_name" id="second_hotel_name">
                    {% if not form.second_hotel_name.value() %}
                    <input type="text" readonly="readonly" placeholder="请选择" style="margin-top: 14px; margin-left: 0px;"/>
                    <i class="icon icon-type"></i>
                    {% else %}
                        {% if form.second_hotel_name.value() == 'not_book_hotel' %}
                        在您预订好酒店后，可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                        {% else %}
                            {% if form.second_hotel_name.value() == 'no_hotel' %}
                            在预订成功后，您可以通过微信服务号或400电话与我们联系，以确认接送地点和时间。
                            {% else %}
                                {% if form.second_hotel_name.value() == 'stay_famliy' %}
                                    在预订成功后，您可以通过微信服务号或400电话与我们联系，以确定您最方便的接送地点和时间。
                                {% else %}
                                <input type="text" readonly="readonly" placeholder="请选择" style="margin-top: 14px; margin-left: 0px;" value="{{ form.second_hotel_name.value()|default('') }}">
                                <i class="icon icon-type"></i>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    {% endif %}
                </td>
            </tr>
            {% endif %}
        </table>
        <p class="surcharge">
            <input type="hidden" name="surcharge" id="id_surcharge" value="{{ form.surcharge.value()|default('') }}">
            <span>接送附加费</span><span class="surcharge-price">{{ form.surcharge.value()|default('0') }}</span>
        </p>
        {% if product.support_hotels %}
        <p style="margin-left: -10px;">
            <span class="booking-agreement">
                <input type="checkbox" id="support_hotels">
                <label for="support_hotels">接送酒店相同</label>
            </span>
        </p>
        {% endif %}
        {% endif %}
        {% endif %}
        {% endif %}
        <div class="total">
            <p>总价：</p>
            <p><strong style="font-size:22px; font-weight: 100;">￥<span id="total_prices"></span></strong></p>
        </div>
        <input type="submit" id="submit" style="display: none;">
    </form>
    <p class="order">
        <a href="###" class="info">详 情</a>
        <a href="###" class="done">完 成</a>
    </p>
</section>
{% endblock %}
{% block js_ex %}
<script type="text/javascript">
$(document).ready(function(){
    {% if user_agent == 4 %}
    android.setTitle('{{ product.name }}');
    android.goBackApp(true);
    android.showContactUs(true);
    {% else %}
    JS2ObjCBridge.call("setTitle", ['{{ product.name }}']);
    JS2ObjCBridge.call("goBackApp", [true]);
    JS2ObjCBridge.call("setPlanID", [{{ plan_id }}]);
    JS2ObjCBridge.call("showContactUs", [true]);
    {% endif %}

    {% if form.hotel_name.value() %}
    setHotelName('hotel_name', "{{ form.hotel_name.value()|default('')|safe }}");
    {% endif %}

    {% if form.second_hotel_name.value() %}
    setHotelName('second_hotel_name', "{{ form.second_hotel_name.value()|default('')|safe }}");
    {% endif %}

    if(typeof String.prototype.trim !== 'function'){
        String.prototype.trim = function(){
        return this.replace(/(^\s*)|(\s*$)/g,"");
        }
    };

    {% if success %}
    if ( typeof(android) != "undefined" ) {
        android.setOrderSuccess();
    };
    {% endif %}


    var position = {{ position }};

    total_prices();

    var check_value = function(value, show_class, key){
        if (!value) {
            $("."+show_class).find(".error").text();
            $("."+show_class).show();
        };
    };

    $("#add_type").click(function(){
        var counts = 0;
        $("input[name='count']").each(function() {
            counts += parseInt($(this).val());
        });
        var type_template = $("#clone-type").clone();
        type_template.find("input[name='ordertype']").val(0);
        type_template.find("input[name='position']").attr("position", position);
        type_template.find("input[name='count']").val(1);
        type_template.find(".type-price").text(type_template.find("input[name='count']").attr("data-fee"));
        type_template.find("table").attr("id", '');
        $(".types").append(type_template);
        position += 1;
        total_prices();
    });

    $("input[name='count']").live("keyup", function(){
        var obj = $(this);
        var count = $(this).val()
        if (count > 9999) {
            obj.val(9999);
            count = 9999;
        };
        var fee = parseInt($(this).attr('data-fee'));
        if (!count) {
            count = 0;
        };
        var counts = 0;
        $("input[name='count']").each(function() {
            counts += parseInt($(this).val());
        });
        var price = fee * count;
        $(this).parents("table").find(".type-price").text(price);
        total_prices();
    });

    $("input[name='count']").live("change", function(){
        var obj = $(this);
        var count = $(this).val()
        var fee = parseInt($(this).attr('data-fee'));
        if (!count) {
            count = 0;
        };
        var counts = 0;
        $("input[name='count']").each(function() {
            counts += parseInt($(this).val());
        });
        var price = fee * count;
        $(this).parents("table").find(".type-price").text(price);
        total_prices();
    });
    
    {% if product.types != 1 %}
    $(".changeType").live("click", function() {
        var position = $(this).find("input[type='text']").attr("position");
        $("#changeType").attr('value', position);
        document.getElementById("submit").click();
    });
    {% endif %}

    $("#baby-check").click(function(){
        if ($(this).attr("checked")){
            $(".baby-count").show();
            var value = $("#id_baby_count").val();
            if (!value|| value=="0") {
                $("#id_baby_count").attr("value", 1);
            };
        } else {
            $(".baby-count").hide();
            $("#id_baby_count").attr("value", 0);
        };
    });
    {% if form.baby_count.value() %}
    {% if form.baby_count.value()|to_int %}
    $("#baby-check").click();
    {% endif %}
    {% endif %}

    var last_second_hotel_value = '';
    $("#support_hotels").change(function(){
        if ($(this).attr("checked")){
            $(".support-hotels").hide();
            last_second_hotel_value = $("#id_second_hotel_name").val();
            $("#id_second_hotel_name").val('');
        } else {
            $(".support-hotels").show();
            $("#id_second_hotel_name").val(last_second_hotel_value);
        };
    });

    {% if not form.second_hotel_name.value() %}
    $("#support_hotels").click();
    {% endif %}

    $(".td-hotel").click(function(){
        var value = $(this).attr("name");
        {% if user_agent == 4 %}
        android.goBookingHotel(value);
        {% else %}
        JS2ObjCBridge.call("goBookingHotel", [value],function (response){
             setHotelName(value, response);
        });
        {% endif %}

        return;
    });

    $("#detail").on("click", function(){
        $("#viewDetail").val(true);
        document.getElementById("submit").click();
    });

    $(".done").click(function() {
        document.getElementById("submit").click();
    });

    $(".info").click(function() {
        {% if product.template_id == 5 %}
        window.location.href='/special/product/{{ product.pk }}/detail/?plan_id={{ order.plan_id }}';
        {% else %}
            {% if product.template_id == 6 %}
            window.location.href='/special/product/{{ product.pk }}/detail/?plan_id={{ order.plan_id }}';
            {% else %}
            {% if app_version < '2.1.0' %}
                {% if user_agent == 4 %}
                android.goPoiDetail('{{ product.name }}', {{ product.poi_id }}, false, '');
                {% else %}
                JS2ObjCBridge.call("goPoiDetail", ['{{ product.name }}', {{ product.poi_id }}, false , '']);
                {% endif %}
            {% else %}
                {% if user_agent == 4 %}
                android.goPoiDetailV2('{{ product.name }}', {{ product.mtu_id }}, false, '');
                {% else %}
                JS2ObjCBridge.call("goPoiDetailV2", ['{{ product.name }}', {{ product.mtu_id }}, false , '']);
                {% endif %}
            {% endif %}

            {% endif %}
        {% endif %}
    });

    $("input[name='exceed_people_count']").keyup(function() {
        total_prices();
    });
})
</script>

{% endblock %}

